<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/service.css">
    <title>客服咨询</title>
</head>
<body>
    <header>
        <div class="claerFlex">
            <div class="left_box">
                <img src="./img/u160.png" alt="">
                <h3 class="margin_10 font_24">LOGO</h3>
            </div>
            <div class="right_box">
                <ul class="listStyle">
                    <li><a href="./index.html" >企业主页</a></li>
                    <li><a href="./product.html ">产品</a></li>
                    <li><a href="./programme.html" >解决方案</a></li>
                    <li><a href="./customer.html" >客户案列</a></li>
                    <li><a href="./consult.html" class="active">咨询与服务</a></li>
                    <li><a href="./news.html">企业新闻</a></li>
                    <li><a href="./join.html">加入我们</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div style="padding-top: 100px;"></div>
    <main>
        <img src="./img/u1216.png" alt="">
        <div class="mask"></div>
        <div class="container claerFlex count">
            <div class="left_box">
                <p class="font_30">咨询客服</p>
                <p class="font_20 font_black">7*24小时为您提供优质服务24小时</p>
                <img src="./img/back.svg" alt="" id="back">
                <div class="text_count">
                    <span class="tips font_white">客服XXXX为您服务</span>
                    <span class="my_tips">2222222222222222222222222222222222222222222222</span>
                </div>
                <textarea name="" id="" cols="30" rows="10"></textarea>
                <button id="subit">发送</button>
            </div>
            <div class="right_box">
                <div>
                    <p class="font_30">其他联系方式</p>
                    <ul>
                        <li>
                            <img src="./img/u548.png" alt="">
                            <p class="font_20">XXX-XXXXXXXXX</p>
                        </li>
                        <li>
                            <img src="./img/u550.png" alt="">
                            <p class="font_20">XXXXXX@XXX.com</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </main>
</body>
<script>
    window.onload = ()=>{
        let submit = document.querySelector('#subit');
        
        let back_btn = document.querySelector('#back');
        let my_tips = document.querySelector('.my_tips');
        back_btn.addEventListener('click',()=>{
            history.back(-1)
        })
        submit.addEventListener('click',()=>{
            tips()
        })
        window.addEventListener('keydown',(e)=>{
            if(e.keyCode === 13){
                tips()
            }
        })
        function tips(){
            let text = document.querySelector('textarea').value;
            my_tips.innerHTML = '';
            my_tips.style.display = 'block';
            my_tips.innerHTML = text;
        }
    }
</script>
</html>